<template>
  <template v-if="!modelData.hidden && !!container.panelItems[modelData.id]">
    <i-biz-panel-container-shell
      v-if="modelData.itemType === 'CONTAINER'"
      :controls="controls"
      :modelData="modelData"
      :container="container"
      :controller="container.panelItems[modelData.id]"
    />
    <i-biz-panel-field-shell
      v-else-if="modelData.itemType === 'FIELD'"
      :modelData="modelData"
      :controller="container.panelItems[modelData.id]"
    />
    <i-biz-panel-ctrl-pos
      v-else-if="modelData.itemType === 'CTRLPOS'"
      :controls="controls"
      :modelData="modelData"
      :controller="container.panelItems[modelData.id]"
    />
    <i-biz-panel-tab-panel
      v-else-if="modelData.itemType === 'TABPANEL'"
      :controls="controls"
      :modelData="modelData"
      :container="container"
      :controller="container.panelItems[modelData.id]"
    />
    <i-biz-panel-tab-page
      v-else-if="modelData.itemType === 'TABPAGE'"
      :controls="controls"
      :modelData="modelData"
      :container="container"
      :controller="container.panelItems[modelData.id]"
    />
    <i-biz-panel-raw-item-shell
      v-else-if="modelData.itemType === 'RAWITEM'"
      :modelData="modelData"
      :controller="container.panelItems[modelData.id]"
    />
    <i-biz-panel-button
      v-else-if="modelData.itemType === 'BUTTON'"
      :modelData="modelData"
      :controller="container.panelItems[modelData.id]"
    />
  </template>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { IPanelItem, IControl } from "@ibiz/model-core";
import { IViewLayoutPanelController } from "@ibiz-template/runtime";
import { PropType } from "vue";

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelItem>,
    required: true,
  },
  container: {
    type: Object as PropType<IViewLayoutPanelController>,
    required: true,
  },
  controls: {
    type: Array as PropType<
      {
        modelData: IControl;
        slotProps: IData;
      }[]
    >,
    default: () => [],
  },
});
</script>
